<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :span="8">
              <a-button icon="plus" style="margin-right: 8px" type="primary" @click="handleAdd">新建</a-button>
              <a-button @click="reset">刷新</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="问卷名称" prop="surveyName" align="center" />
        <el-table-column label="所属分类" prop="categoryName" align="center" />
        <el-table-column label="题目类型" align="center">
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.topicType) === 1">单选</el-tag>
            <el-tag v-if="parseInt(scope.row.topicType) === 2">多选</el-tag>
            <el-tag v-if="parseInt(scope.row.topicType) === 3">判断</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="题目名称" prop="topicName" align="center" />
        <!-- <el-table-column width="150" label="状态" align="center" >
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.state) === 1">激活</el-tag>
            <el-tag v-if="parseInt(scope.row.state) === 2" type="danger">冻结</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column label="排序号" prop="sortOrder" align="center" />
        <el-table-column label="创建时间" prop="createTime" align="center" />
        <el-table-column label="更新时间" prop="updateTime" align="center" />
        <el-table-column width="150" fixed="right" align="center" label="操作">
          <template slot-scope="scope">
            <el-link :underline="false" type="primary" @click="handleEdit(scope.row)">编辑</el-link>
            <el-link :underline="false" type="primary" style="margin-left:10px;"
              @click="handleOptions(scope.row)">选项</el-link>
            <!-- <el-link :underline="false" style="margin-left:10px;" type="primary" @click="handleLabel(scope.row)">标签</el-link> -->
          </template>
        </el-table-column>
      </el-table>

      <div style="display: flex;justify-content: flex-end;margin: 20px 0 0;">
        <el-pagination :current-page="queryParam.page" :page-size="queryParam.limit" :page-sizes="[10, 20, 50, 100]"
          :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-card>

    <a-modal :title="modal.title" :visible="modal.visible" maskClosable width="600px" @cancel="modal.visible = false"
      @ok="handleOk">
      <a-form :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">

        <a-form-item label="id" style="display: none;">
          <a-input v-decorator="['id']" />
        </a-form-item>

        <a-form-item label="所属问卷">
          <a-select style="width: 400px"
            v-decorator="['surveyId', { rules: [{ required: true, message: '请选择【所属问卷】' }] }]">
            <a-select-option v-for="item in surveyList" :value="item.id">{{ item.surveyName }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="所属分类">
          <a-select style="width: 400px" @change="handleCategoryChange"
            v-decorator="['categoryId', { rules: [{ required: true, message: '请选择【所属分类】' }] }]">
            <a-select-option v-for="item in surveyCategoryList"
              :value="item.id">{{ item.categoryName }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="所属标签">
          <a-select mode="multiple"
            v-decorator="['categoryLabelIds', { rules: [{ required: true, message: '请选择【所属标签】' }] }]">
            <a-select-option v-for="item in surveyCategoryLabelList"
              :value="item.id">{{ item.labelName }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="题目类型">
          <a-select style="width: 400px"
            v-decorator="['topicType', { rules: [{ required: true, message: '请选择【题目类型】' }] }]">
            <a-select-option v-for="item in topicTypeList" :value="item.value">{{ item.label }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="题目名称">
          <a-input v-decorator="['topicName', { rules: [{ required: true, message: '请选择【题目名称】' }] }]" />
        </a-form-item>

        <a-form-item label="排序号">
          <a-input-number :min="1" :precision="0" placeholder="排序号"
            v-decorator="['sortOrder', { rules: [{ required: true, message: '请选择【排序号】' }] }]"
            :style="{ width: '100%', textAlign: 'center', display: 'inline-block' }" />
        </a-form-item>

      </a-form>
    </a-modal>

    <!-- 选项 -->
    <a-modal :title="modal.title" :visible="modal.visible1" destroyOnClose maskClosable width="1000px"
      @cancel="modal.visible1 = false" @ok="modal.visible1 = false">
      <survey-list-topic-options :id="modal.currentId" :surveyId="modal.surveyId"></survey-list-topic-options>
    </a-modal>

  </div>
</template>

<script>
  import {
    addPaiSurveyTopic,
    listByPagePaiSurveyTopic,
    updatePaiSurveyTopic,
    listAllPaiSurvey,
    listAllPaiSurveyCategory,
    listAllPaiSurveyCategoryLabel
  } from '@/api/survey'

  import SurveyListTopicOptions from './survey-list-topic-options'

  import pick from 'lodash.pick'
  const baseApi = process.env.VUE_APP_API_BASE_URL
  // 表单字段
  const fields = ['id', 'surveyId', 'categoryId', 'topicName', 'topicType', 'sortOrder', 'categoryLabelIds']

  export default {
    name: 'Index',
    components: {
      SurveyListTopicOptions
    },
    props: {
      id: {
        type: String,
        default: ''
      },
    },
    data() {
      return {
        topicTypeList: [
          { value: 1, label: '单选' }
        ],
        stateList: [
          { value: 1, label: '激活' },
          { value: 2, label: '冻结' }
        ],
        queryParam: {
          page: 1,
          limit: 20,
          categoryId: ''
        },
        total: 0,
        modal: {
          visible: false,
          visible1: false,
          currentId: '',
          surveyId: '',
          title: '',
          form: {}
        },
        tableData: [],
        surveyCategoryList: [],
        surveyList: [],
        surveyCategoryLabelList: [],
        form: this.$form.createForm(this),
      }
    },
    // mounted () {
    //   this.getTable()
    // },
    created() {
      this.queryParam.surveyId = this.id
      this.getTable()
      // 加载代理商列表，2024年11月10日12:13:55
      this.listAllPaiSurveyCategory()
      this.listAllPaiSurvey()
      // 防止表单未注册
      fields.forEach(v => this.form.getFieldDecorator(v))
      // 当 model 发生改变时，为表单设置值
      this.$watch('model', () => {
        if (this.model) {
          this.form.setFieldsValue(pick(this.model, fields))
        }
      })

    },
    methods: {
      handleCategoryChange(categoryId) {
        this.form.setFieldsValue({ categoryLabelIds: [] })
        this.listAllPaiSurveyCategoryLabel(categoryId)
      },
      listAllPaiSurveyCategoryLabel(categoryId) {
        listAllPaiSurveyCategoryLabel({ categoryId: categoryId }).then(res => {
          this.surveyCategoryLabelList = res.data
        }).catch(() => {})
      },
      listAllPaiSurveyCategory() {
        listAllPaiSurveyCategory().then(res => {
          this.surveyCategoryList = res.data
        }).catch(() => {})
      },
      listAllPaiSurvey() {
        listAllPaiSurvey().then(res => {
          this.surveyList = res.data
        }).catch(() => {})
      },
      query() {
        this.queryParam.page = 1
        this.getTable()
      },
      reset() {
        this.queryParam.page = 1
        this.queryParam.limit = 20
        this.getTable()
      },
      handleSizeChange(val) {
        this.queryParam.limit = val
        this.getTable()
      },
      handleCurrentChange(val) {
        this.queryParam.page = val
        this.getTable()
      },
      getTable() {
        listByPagePaiSurveyTopic(this.queryParam).then(res => {
          this.tableData = res.data.records
          this.total = parseInt(res.data.total)
        }).catch(() => {})
      },
      handleOk() {
        this.form.validateFields((errors, values) => {
          if (!errors) {
            if (values.id) {
              // 修改
              updatePaiSurveyTopic(values).then(res => {
                this.modal.form = {}
                this.modal.visible = false
                this.queryParam.page = 1
                this.getTable()
                this.$message.success('修改成功')
              }).catch(() => {})
            } else {
              // 新增，2024年12月16日14:33:18
              values.state = 1
              addPaiSurveyTopic(values).then(res => {
                this.modal.form = {}
                this.modal.visible = false
                this.queryParam.page = 1
                this.getTable()
                this.$message.success('新增成功')
              }).catch(() => {})
            }
          }
        })
      },
      handleAdd() {
        this.modal.form = {
          topicName: '',
          surveyId: this.id,
          categoryId: '',
          sortOrder: 1,
          topicType: 1,
          categoryLabelIds: '',
          id: ''
        }
        this.modal.visible = true
        this.modal.title = '新增'
        this.form.setFieldsValue(pick(this.modal.form, fields))
      },
      handleEdit(record) {
        const data = JSON.parse(JSON.stringify(record))
        this.modal.form = {
          topicName: data.topicName,
          surveyId: data.surveyId,
          sortOrder: data.sortOrder,
          topicType: data.topicType,
          categoryId: data.categoryId,
          categoryLabelIds: data.categoryLabelIds,
          id: data.id
        }
        this.modal.visible = true
        this.modal.title = '编辑'
        if (data.categoryId) {
          this.listAllPaiSurveyCategoryLabel(data.categoryId)
        }
        // setTimeout(() => {
        this.form.setFieldsValue(pick(this.modal.form, fields))
        // }, 500)
      },
      // 选项
      handleOptions(row) {
        this.modal.currentId = row.id
        this.modal.surveyId = row.surveyId
        this.modal.visible1 = true
        this.modal.title = '编辑选项'
      }
    }
  }
</script>

<style lang="less" scoped>
  .view-video {
    position: relative;

    .close {
      position: absolute;
      right: 15px;
      top: 0;
      cursor: pointer;
    }
  }

  /deep/.ant-modal-body {
    max-height: calc(80vh - 150px);
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 6px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }

    &::-webkit-scrollbar-thumb {
      // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #e3e3e6;
      border-radius: 6px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
      // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
    }
  }
</style>